<template>
	<view class="pVue">
	  <view class="column">
	    <view class="container animation-1" v-if="num==1">
	      <view class="shape shape1"></view>
	      <view class="shape shape2"></view>
	      <view class="shape shape3"></view>
	      <view class="shape shape4"></view>
	    </view>
	  </view>
	  <view class="column">
	    <view class="container animation-2"  v-if="num==2">
	      <view class="shape shape1"></view>
	      <view class="shape shape2"></view>
	      <view class="shape shape3"></view>
	      <view class="shape shape4"></view>
	    </view>
	  </view>
	  <view class="column">
	    <view class="container animation-3"  v-if="num==3">
	      <view class="shape shape1"></view>
	      <view class="shape shape2"></view>
	      <view class="shape shape3"></view>
	      <view class="shape shape4"></view>
	    </view>
	  </view>
	  <view class="column">
	    <view class="container animation-4"  v-if="num==4">
	      <view class="shape shape1"></view>
	      <view class="shape shape2"></view>
	      <view class="shape shape3"></view>
	      <view class="shape shape4"></view>
	    </view>
	  </view>
	  <view class="column">
	    <view class="container animation-5"  v-if="num==5">
	      <view class="shape shape1"></view>
	      <view class="shape shape2"></view>
	      <view class="shape shape3"></view>
	      <view class="shape shape4"></view>
	    </view>
	  </view>
	  <view class="column">
	    <view class="container animation-6"  v-if="num==6">
	      <view class="shape shape1"></view>
	      <view class="shape shape2"></view>
	      <view class="shape shape3"></view>
	      <view class="shape shape4"></view>
	    </view>
	  </view>
	</view>
	
	
</template>

<script>
	export default{
		props:{
			// 默认使用 1
			num:{
				type: [String, Number],
				default: '1'
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			
		},
		computed:{
			
		}
	}
</script>

<style>
	.pVue {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 999999;
	}
	.column {
	  margin: 5px auto;
	  /* border: 1px solid rgba(255, 255, 255, 0.1); */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.container {
	  width: 30px;
	  height: 30px;
	  position: relative;
	}
	.container.animation-1 {
	  transform: rotate(45deg);
	}
	.container.animation-2, .container.animation-4 {
	  transform: rotate(10deg);
	}
	.container.animation-2 .shape, .container.animation-4 .shape {
	  border-radius: 5px;
	}
	.container.animation-2, .container.animation-3, .container.animation-4 {
	  -webkit-animation: rotation 1s infinite;
	          animation: rotation 1s infinite;
	}
	.container.animation-3 .shape1 {
	  border-top-left-radius: 10px;
	}
	.container.animation-3 .shape2 {
	  border-top-right-radius: 10px;
	}
	.container.animation-3 .shape3 {
	  border-bottom-left-radius: 10px;
	}
	.container.animation-3 .shape4 {
	  border-bottom-right-radius: 10px;
	}
	.container.animation-4, .container.animation-5 {
	  transform: rotate(45deg);
	}
	.container.animation-5 .shape {
	  width: 15px;
	  height: 15px;
	}
	.container.animation-6 {
	  -webkit-animation: rotation 1s infinite;
	          animation: rotation 1s infinite;
	}
	.container.animation-6 .shape {
	  width: 12px;
	  height: 12px;
	  border-radius: 2px;
	}
	.container .shape {
	  position: absolute;
	  width: 10px;
	  height: 10px;
	  border-radius: 1px;
	}
	.container .shape.shape1 {
	  left: 0;
	  background-color: #1AC188;
	}
	.container .shape.shape2 {
	  right: 0;
	  background-color: #60A5FA;
	}
	.container .shape.shape3 {
	  bottom: 0;
	  background-color: #60A5FA;
	}
	.container .shape.shape4 {
	  bottom: 0;
	  right: 0;
	  background-color: #1AC188;
	}
	
	@-webkit-keyframes rotation {
	  from {
	    transform: rotate(0deg);
	  }
	  to {
	    transform: rotate(360deg);
	  }
	}
	
	@keyframes rotation {
	  from {
	    transform: rotate(0deg);
	  }
	  to {
	    transform: rotate(360deg);
	  }
	}
	.animation-1 .shape1 {
	  -webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
	          animation: animation1shape1 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation1shape1 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(16px, 16px);
	  }
	}
	
	@keyframes animation1shape1 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(16px, 16px);
	  }
	}
	.animation-1 .shape2 {
	  -webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
	          animation: animation1shape2 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation1shape2 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-16px, 16px);
	  }
	}
	
	@keyframes animation1shape2 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-16px, 16px);
	  }
	}
	.animation-1 .shape3 {
	  -webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
	          animation: animation1shape3 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation1shape3 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(16px, -16px);
	  }
	}
	
	@keyframes animation1shape3 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(16px, -16px);
	  }
	}
	.animation-1 .shape4 {
	  -webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
	          animation: animation1shape4 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation1shape4 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-16px, -16px);
	  }
	}
	
	@keyframes animation1shape4 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-16px, -16px);
	  }
	}
	.animation-2 .shape1 {
	  -webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
	          animation: animation2shape1 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation2shape1 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(20px, 20px);
	  }
	}
	
	@keyframes animation2shape1 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(20px, 20px);
	  }
	}
	.animation-2 .shape2 {
	  -webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
	          animation: animation2shape2 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation2shape2 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-20px, 20px);
	  }
	}
	
	@keyframes animation2shape2 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-20px, 20px);
	  }
	}
	.animation-2 .shape3 {
	  -webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
	          animation: animation2shape3 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation2shape3 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(20px, -20px);
	  }
	}
	
	@keyframes animation2shape3 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(20px, -20px);
	  }
	}
	.animation-2 .shape4 {
	  -webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
	          animation: animation2shape4 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation2shape4 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-20px, -20px);
	  }
	}
	
	@keyframes animation2shape4 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-20px, -20px);
	  }
	}
	.animation-3 .shape1 {
	  -webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
	          animation: animation3shape1 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation3shape1 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(5px, 5px);
	  }
	}
	
	@keyframes animation3shape1 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(5px, 5px);
	  }
	}
	.animation-3 .shape2 {
	  -webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
	          animation: animation3shape2 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation3shape2 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-5px, 5px);
	  }
	}
	
	@keyframes animation3shape2 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-5px, 5px);
	  }
	}
	.animation-3 .shape3 {
	  -webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
	          animation: animation3shape3 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation3shape3 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(5px, -5px);
	  }
	}
	
	@keyframes animation3shape3 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(5px, -5px);
	  }
	}
	.animation-3 .shape4 {
	  -webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
	          animation: animation3shape4 0.5s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation3shape4 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-5px, -5px);
	  }
	}
	
	@keyframes animation3shape4 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-5px, -5px);
	  }
	}
	.animation-4 .shape1 {
	  -webkit-animation: animation4shape1 0.3s ease 0s infinite alternate;
	          animation: animation4shape1 0.3s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation4shape1 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(5px, 5px);
	  }
	}
	
	@keyframes animation4shape1 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(5px, 5px);
	  }
	}
	.animation-4 .shape2 {
	  -webkit-animation: animation4shape2 0.3s ease 0.3s infinite alternate;
	          animation: animation4shape2 0.3s ease 0.3s infinite alternate;
	}
	
	@-webkit-keyframes animation4shape2 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-5px, 5px);
	  }
	}
	
	@keyframes animation4shape2 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-5px, 5px);
	  }
	}
	.animation-4 .shape3 {
	  -webkit-animation: animation4shape3 0.3s ease 0.3s infinite alternate;
	          animation: animation4shape3 0.3s ease 0.3s infinite alternate;
	}
	
	@-webkit-keyframes animation4shape3 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(5px, -5px);
	  }
	}
	
	@keyframes animation4shape3 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(5px, -5px);
	  }
	}
	.animation-4 .shape4 {
	  -webkit-animation: animation4shape4 0.3s ease 0s infinite alternate;
	          animation: animation4shape4 0.3s ease 0s infinite alternate;
	}
	
	@-webkit-keyframes animation4shape4 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-5px, -5px);
	  }
	}
	
	@keyframes animation4shape4 {
	  from {
	    transform: translate(0, 0);
	  }
	  to {
	    transform: translate(-5px, -5px);
	  }
	}
	.animation-5 .shape1 {
	  animation: animation5shape1 2s ease 0s infinite reverse;
	}
	
	@-webkit-keyframes animation5shape1 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(0, 15px);
	  }
	  50% {
	    transform: translate(15px, 15px);
	  }
	  75% {
	    transform: translate(15px, 0);
	  }
	}
	
	@keyframes animation5shape1 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(0, 15px);
	  }
	  50% {
	    transform: translate(15px, 15px);
	  }
	  75% {
	    transform: translate(15px, 0);
	  }
	}
	.animation-5 .shape2 {
	  animation: animation5shape2 2s ease 0s infinite reverse;
	}
	
	@-webkit-keyframes animation5shape2 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(-15px, 0);
	  }
	  50% {
	    transform: translate(-15px, 15px);
	  }
	  75% {
	    transform: translate(0, 15px);
	  }
	}
	
	@keyframes animation5shape2 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(-15px, 0);
	  }
	  50% {
	    transform: translate(-15px, 15px);
	  }
	  75% {
	    transform: translate(0, 15px);
	  }
	}
	.animation-5 .shape3 {
	  animation: animation5shape3 2s ease 0s infinite reverse;
	}
	
	@-webkit-keyframes animation5shape3 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(15px, 0);
	  }
	  50% {
	    transform: translate(15px, -15px);
	  }
	  75% {
	    transform: translate(0, -15px);
	  }
	}
	
	@keyframes animation5shape3 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(15px, 0);
	  }
	  50% {
	    transform: translate(15px, -15px);
	  }
	  75% {
	    transform: translate(0, -15px);
	  }
	}
	.animation-5 .shape4 {
	  animation: animation5shape4 2s ease 0s infinite reverse;
	}
	
	@-webkit-keyframes animation5shape4 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(0, -15px);
	  }
	  50% {
	    transform: translate(-15px, -15px);
	  }
	  75% {
	    transform: translate(-15px, 0);
	  }
	}
	
	@keyframes animation5shape4 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(0, -15px);
	  }
	  50% {
	    transform: translate(-15px, -15px);
	  }
	  75% {
	    transform: translate(-15px, 0);
	  }
	}
	.animation-6 .shape1 {
	  -webkit-animation: animation6shape1 2s linear 0s infinite normal;
	          animation: animation6shape1 2s linear 0s infinite normal;
	}
	
	@-webkit-keyframes animation6shape1 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(0, 18px);
	  }
	  50% {
	    transform: translate(18px, 18px);
	  }
	  75% {
	    transform: translate(18px, 0);
	  }
	}
	
	@keyframes animation6shape1 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(0, 18px);
	  }
	  50% {
	    transform: translate(18px, 18px);
	  }
	  75% {
	    transform: translate(18px, 0);
	  }
	}
	.animation-6 .shape2 {
	  -webkit-animation: animation6shape2 2s linear 0s infinite normal;
	          animation: animation6shape2 2s linear 0s infinite normal;
	}
	
	@-webkit-keyframes animation6shape2 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(-18px, 0);
	  }
	  50% {
	    transform: translate(-18px, 18px);
	  }
	  75% {
	    transform: translate(0, 18px);
	  }
	}
	
	@keyframes animation6shape2 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(-18px, 0);
	  }
	  50% {
	    transform: translate(-18px, 18px);
	  }
	  75% {
	    transform: translate(0, 18px);
	  }
	}
	.animation-6 .shape3 {
	  -webkit-animation: animation6shape3 2s linear 0s infinite normal;
	          animation: animation6shape3 2s linear 0s infinite normal;
	}
	
	@-webkit-keyframes animation6shape3 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(18px, 0);
	  }
	  50% {
	    transform: translate(18px, -18px);
	  }
	  75% {
	    transform: translate(0, -18px);
	  }
	}
	
	@keyframes animation6shape3 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(18px, 0);
	  }
	  50% {
	    transform: translate(18px, -18px);
	  }
	  75% {
	    transform: translate(0, -18px);
	  }
	}
	.animation-6 .shape4 {
	  -webkit-animation: animation6shape4 2s linear 0s infinite normal;
	          animation: animation6shape4 2s linear 0s infinite normal;
	}
	
	@-webkit-keyframes animation6shape4 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(0, -18px);
	  }
	  50% {
	    transform: translate(-18px, -18px);
	  }
	  75% {
	    transform: translate(-18px, 0);
	  }
	}
	
	@keyframes animation6shape4 {
	  0% {
	    transform: translate(0, 0);
	  }
	  25% {
	    transform: translate(0, -18px);
	  }
	  50% {
	    transform: translate(-18px, -18px);
	  }
	  75% {
	    transform: translate(-18px, 0);
	  }
	}
	@media screen and (max-width: 600px) {
	  .content {
	    align-content: flex-start;
	  }
	  .content .column {
	    width: calc(50% - 30px);
	  }
	}
	@media screen and (max-width: 400px) {
	  .content {
	    align-content: flex-start;
	  }
	  .content .column {
	    width: calc(100% - 30px);
	  }
	}
</style>